<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax例程</title>
       <!-- 引入bootsrap css -->
    <link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/bootstrap/easyui.css">
    <!--  定义页面样式  -->
    <style type="text/css">
      /*body {background-color:red}*/
        form {color:green}
    </style>
    <!--  <meta http-equiv="refresh" content="1">-->
    <!--  引入外部的js库-->
    <script src="../lib/easyui/jquery.min.js"></script>
<!--    <script src="../lib/bootstrap/js/bootstrap.js"></script>-->
    <script src="../lib/easyui/jquery.easyui.min.js"></script>
    <script src="../lib/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<button id="btn1" class="btn btn-lg btn-danger">ajax</button>
<button id="btn2" class="btn btn-lg btn-danger">get请求</button>
<button id="btn3" class="btn btn-lg btn-danger">post请求</button>
<input id="result_txt" class="easyui-textbox" />
<hr>
<button id="btn4" class="btn btn-lg btn-danger">登录</button>
<div id="dlg1"></div>
<hr>
<table id="books"></table>
<script>
    $(function(){
        // 作业:完善这个表格,要求一次只能选中一行,显示详情页要求取消选中的行
        // 在弹出窗,显示一张书籍的图片
        $('#books').datagrid({
            url:"books.json",
            fitColumns:true,
            pagination:true,
            rownumbers:true,
            pageNumber: 1,
            pageSize: 1,
            pageList: [1, 15, 20, 30, 40, 50, 60, 70, 80, 100, 200],
            columns:[[
                {field:'code',title:'代码',width:100},
                {field:'name',title:'书名',width:100},
                {field:'price',title:'价格',width:100,align:'right'}
            ]],
            onClickRow:function(index, row){
                console.log(index),
                console.log(row)
                $('#dlg1').dialog({
                    title: '书籍详情',
                    width: 400,
                    height: 400,
                    closed: false,
                    cache: false,
                    href: 'book.html',
                    modal: true
                })
                setTimeout(function(){
                    $('#form2').form('load',row)
                },150)

            }
        })

        $('#btn4').click(function(e){
            $('#dlg1').dialog({
                title: '登录',
                width: 400,
                height: 400,
                closed: false,
                cache: false,
                href: 'dialog.html',
                modal: true
            })
        })

        $('#btn2').on('click',function(e){
            $.get('ajaxget.json',function(data){
                console.log(data)
                if(data.code === 1){
                    $('#result_txt').textbox('setValue',data.msg)
                    //$.messager.alert('系统提示',data.msg,'info')
                }else{
                    //$.messager.alert('系统提示',data.msg,'error')
                }
            })
        })

        $('#btn3').on('click',function(e){
            $.post("ajaxpost.json",{},function(data){
                console.log(data)
                if(data.code === 1){
                    $('#result_txt').textbox('setValue',data.msg)
                    //$.messager.alert('系统提示',data.msg,'info')
                }else{
                    //$.messager.alert('系统提示',data.msg,'error')
                }
            })
        })

        $('#btn1').on('click',function(e){
            //$.messager.alert('系统提示','正在开发中....','warning');
            $.ajax({
                url:'ajaxdata.json', //服务器接口 url
                data:{username:'yzl',password:'1234'},// 请求参数
                dataType:'json', // 请求的数据类型
                type:'post', // 请求的方式
                success:function(data){
                    //data =  eval('(' + data + ')');
                    console.log(data)
                    if(data.code === 1){
                        $('#result_txt').textbox('setValue',data.msg)
                        //$.messager.alert('系统提示',data.msg,'info')
                    }else{
                        $.messager.alert('系统提示',data.msg,'error')
                    }
                },
                error:function(xhr,status,error){
                    $.messager.alert('系统提示','系统错误,请联系系统管理员:' + error,'error')
                    console.log(xhr);
                    console.log(status);
                    console.log(error);
                }
            });
        })
    })
</script>
</body>
</html>